<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>接警 - 调度中心</title>
    <link href="/ercms/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/ercms/lib/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <script src="/ercms/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/dispatch-create-event.js}"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "bd7cfe5378f27ad4720f0279a1b184a7",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=9c44b0918d292a11356bd716509f09c3"></script>
    <style>
        .call-info-card { background-color: #f0f8ff; }
        .form-section { margin-bottom: 2rem; }
        #eventMap {
            width: 100%;
            height: 300px;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
    </style>
</head>
<body>
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2><i class="bi bi-headset"></i> 接警中心</h2>
        <a th:href="@{/dispatch}" class="btn btn-sm btn-outline-secondary">返回调度中心</a>
    </div>

    <form id="callTakingForm">
        <!-- 报警电话核心信息 -->
        <div class="card call-info-card form-section">
            <div class="card-body">
                <h5 class="card-title"><i class="bi bi-telephone-inbound"></i> 报警信息</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="callerNumber" class="form-label"><b>来电号码*</b></label>
                        <input type="text" class="form-control form-control-lg" id="callerNumber" required>
                    </div>
                    <div class="col-md-8 mb-3">
                        <label for="location" class="form-label">事发地点</label>
                        <input type="text" class="form-control" id="location" required>
                    </div>
                    <!-- 地图选点 -->
                    <div class="mb-3">
                        <div id="eventMap"></div>
                        <input type="hidden" id="lnglat">
                        <div id="mapTip" style="color:#888;font-size:13px;">可在地图上点击选取事发地点</div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">事件描述</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="callNotes" class="form-label"><b>详细事件内容 / 通话记录*</b></label>
                    <textarea class="form-control" id="callNotes" rows="5" placeholder="请详细记录报警人描述的事件经过、人员伤亡、现场情况等..." required></textarea>
                </div>
            </div>
        </div>

        <!-- 事件定性与分级 -->
        <div class="form-section">
            <h5><i class="bi bi-flag"></i> 事件定性与分级</h5>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="title" class="form-label">事件标题*</label>
                    <input type="text" class="form-control" id="title" placeholder="根据通话内容自动或手动生成" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="eventTypeId" class="form-label">事件类型*</label>
                    <select class="form-select" id="eventTypeId" required>
                         <option th:each="type : ${eventTypes}" th:value="${type.id}" th:text="${type.name}"></option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="priority" class="form-label">优先级</label>
                    <select class="form-select" id="priority">
                        <option value="HIGH">高</option>
                        <option value="MEDIUM" selected>中</option>
                        <option value="LOW">低</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="severity" class="form-label">严重程度</label>
                    <select class="form-select" id="severity">
                        <option value="CRITICAL">紧急</option>
                        <option value="MAJOR">重大</option>
                        <option value="MINOR" selected>一般</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="text-center">
            <button type="submit" class="btn btn-danger btn-lg"><i class="bi bi-send"></i> 提交并创建事件</button>
        </div>
    </form>
    <div id="resultMsg" class="mt-3"></div>
</div>


</body>
</html> 
